.index-container{
    max-width: 640px;
    margin: 0 auto;
    .zl-index-header{
        height: .32rem;
        padding: .08rem;
        background-color: white; 
        div{
            float: left;
            height: .32rem;
            img{
                height: 100%;
                max-width: 2.52rem;
            }
        } 
        a{
            float: right;
            font-size: .14rem;
            line-height: .32rem;
            img{
                width: .12rem;
                height: .17rem;
                vertical-align: text-top;
                margin-right: .03rem;
            }
        }
    }
    .zl-search{
        display: flex;
        padding: .08rem;
        background-color: #d4d6d9;
        input{
            flex: 1;
            margin-right: .055rem;
            border: 1px solid #d4d4d4;
            border-radius: .03rem;
            height: .34rem;
            outline: 0;
            background-color: #f5f5f5;
            text-indent: .01rem;
        }
        .search{
            width: .47rem;
            height: .34rem;
            line-height: .34rem;
            text-align: center;
            background-color: white;
            border-radius: .03rem;
            cursor: pointer;
            border: 0;
            font-size: .14rem;
            color: #333;
        }
    }
    .index-slide{
        height: auto;
        position: relative;
        div{
            a{
                display: inline-block;
                width: 100%;
                height: 3rem;
                cursor: pointer;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
    .index-title-list{
        background-color: white;
        .title-list{
            display: flex;
            a{
                display: block;
                flex: 1;
                li{
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
            }
        }
    }
    .index-lower-price{
        background: url(../img/index/index-lowerprice1.jpg) no-repeat 0 0;
        background-size: 100%;
        height: 3.78rem;
        padding: .16rem;
        .lower-product-left{
            float: left;
            width: 3.04rem;
            height: 3.78rem;
            border-right: 1px solid #f1f1f1;
            box-sizing: border-box;
            a{
                display: block;
                height: 100%;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
        }
        .lower-price-right{
            float: right;
            width: 3.04rem;
            height: 3.78rem;
            box-sizing: border-box;
            &>a{
                display: block;
                width: 100%;
                height: 1.89rem;
                border-bottom: 1px solid #f1f1f1;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            div{
                width: 100%;
                display: flex;
                a{
                    display: block;
                    flex: 1;
                    height: 1.88rem;
                    width: 1.52rem;
                    border-right: 1px solid #f1f1f1;
                    img{
                        width: 100%;
                        height: 100%;
                        
                    }
                }
            }
        }
    }
    .index-headline{
        background-color: white;
        .headline{
            position: relative;
            height: .75rem;
            line-height: .75rem;
            .headline-logo{
                position: absolute;
                width: 1.56rem;
                top: .22rem;
                left: .2rem;
            }
            .headline-infomation{
                height: .75rem;
                line-height: .75rem;
                padding: 0 .3rem 0 1.9rem;
                color: #333;
                font-size: .14rem;
                ul{
                    height: 100%;
                    li{
                        height: 100%;
                    }
                }
            }
            .go{
                position: absolute;
                top: .28rem;
                right: .2rem;
                width: .13rem;
                height: .22rem;
            }
        }
        a{
            display: inline-block;
            width: 100%;
            img{
                width: 100%;
            }
        }
    }
    .index-delicate{
        &>a{
            display: block;
            height: .68rem;
            width: 100%;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .delicate-list{
            display: flex;
            flex-flow: wrap;
            a{
                display: block;
                li{
                    width: 2.13rem;
                    height: 2.13rem;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
            }
        }
    }
    .index-fresh{
        background-color: white;
        &>a{
            background-color: white;
            display: inline-block;
            height: .68rem;
            width: 100%;
            img{
                width: 100%;
                height: 100%;
                vertical-align: middle;
            }
        }
        .fresh-list{
            a{
                display: block;
                li{
                    position: relative;
                    margin-top: .05rem;
                    img{
                        width: 100%;
                        vertical-align: middle;
                    }
                    .fresh-list-information{
                        position: absolute;
                        width: 2.9rem;
                        height: 1.25rem;
                        border: .06rem solid white;
                        text-align: center;
                        background: hsla(0,0%,100%,.5);
                        top: .22rem;
                        right: .18rem;
                        h2{
                            font-size: .16rem;
                            margin-top: .2rem;
                        }
                        P{
                            font-size: .1rem;
                            margin-top: .1rem;
                            em{
                                font-size: .16rem;
                                color: #f23030;
                                font-style: normal;
                            }
                        }
                    }
                }
            }
        }
    }
    
    .index-aside{
        .index-nav{
            width: 100%;
            height: .8rem;
            line-height: .8rem;
            background-color: white;
            position: relative;
            overflow: hidden;
            border-bottom: 1px solid #f1f1f1;
            ul{
                width: 17.6rem;
                background-color: white;
                font-size: 0;
                li{
                    display: inline-block;
                    width: 1.6rem;
                    height: .68rem;
                    line-height: .68rem;
                    text-align: center;
                    a{
                        display: inline-block;
                        color: #333;
                        font-size: .14rem;
                    }
                }
            }
        }
        .index-vegetable{
            .vegetable-list{  
                width: 100%;
                font-size: 0;
            }
        }
    }
}
.pays{
    width: .4rem;
    height: .4rem;
    line-height: .4rem;
    overflow: hidden;
    border-radius: .2rem;
    display: inline-block;
    position: fixed;
    z-index: 999;
    bottom: .78rem;
    left: .08rem;
    background-color: rgba(151, 197, 49, 0.8);
    a{
        display: inline-block;
        width: .4rem;
        height: .4rem;
        border-radius: .2rem;
        background: url(../img/index/pays.png) no-repeat .1rem .1rem ;
        background-size: .21rem .21rem;
    }
}

.pay-for{ 
    display: none;
    width: 1.7rem;
    height: 1.7rem;
    background: url(../img/index/payfor-back.png) no-repeat;
    background-size: 1.7rem 1.7rem;
    position: relative;
    position: fixed;
    z-index: 999;
    bottom: 80px;
    left: 30px;
    a{
        width: .2rem;
        height: .2rem;
        position: absolute;
        z-index: 9999;
        background: url("../img/index/icon.png") no-repeat;
    }
    .pay-for1{
        left: .44rem;
        top: .32rem;
        background-position: 0 -2.87rem;
        background-size: .6rem 7rem;
        &:hover{
            background-position: 0 -4.23rem;
        }
    }
    .pay-for2{
        left: 1.07rem;
        top: .31rem;
        background-position: 0 -3.08rem;
        background-size: .6rem 7rem;
        &:hover{
            background-position: 0 -4.45rem;
        }
    }
    .pay-for3{
        left: .24rem;
        top: .9rem;
        background-position: 0 -3.31rem;
        background-size: .6rem 7rem;
        &:hover{
            background-position: 0 -4.67rem;
        }
    }
    .pay-for4{
        width: .25rem;
        left: 1.22rem;
        top: .91rem;
        background-position: 0 -3.53rem;
        background-size: .6rem 7rem;
        &:hover{
            background-position: 0 -4.89rem;
        }
    }
    .pay-for5{
        left: .78rem;
        top: 1.25rem;
        background-position: 0 -3.76rem;
        background-size: .6rem 7rem;
        &:hover{
            background-position: 0 -5.11rem;
        }
    }
    .pay-for6{
        width: .24rem;
        height: .23rem;
        left: .73rem;
        top: .73rem;
        background-position: 0 -3.98rem;
        background-size: .6rem 7rem;
        &:hover{
            background-position: 0 -5.33rem;
        }
    }
}
